class FooterBar extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback () {
    this.render();
  }

  render () {
    this.shadowRoot.innerHTML = `
      <link rel="stylesheet" href="static/css/bootstrap.min.css" />
      <link rel="stylesheet" href="static/css/bootstrap-icons.css" />
      <link rel="stylesheet" href="static/css/font-awesome-pro.css" />
      <link rel="stylesheet" href="static/css/animate.css" />
      <link rel="stylesheet" href="static/css/glightbox.min.css" />
      <link rel="stylesheet" href="static/css/scrollCue.css" />
      <link rel="stylesheet" href="static/css/swiper-bundle.css" />
      <link rel="stylesheet" href="static/css/spacing.css" />
      <link rel="stylesheet" href="static/css/main.css" />
      <link rel="stylesheet" href="static/css/responsive.css" />
        <footer class="site-footer">
      <div
        class="footer-bg-dot"
        style="background-image: url('static/image/dot-a-white.png')"
      ></div>
      <div class="footer-top">
        <div class="container">
          <div class="row d-flex justify-content-between">
            <!-- Singel Item -->
            <div class="col-lg-3 col-sm-6 mb-30 ">
              <div class="footer-widgets-item">
                <div class="f-logo">
                  <a href="index.html">
                    <img src="static/image/logo-3.png" width="100" hegiht="100" alt="Logo" />
                  </a>
                </div>
                <p class="content">
                  爱健鸿康健康管理有限公司是一家致力于为个人与企业提供全面、科学的健康管理服务的专业机构。
                  我们秉承“关爱生命、守护健康”的理念，结合先进的科技手段与专业的服务团队，为客户打造个性化、系统化的健康解决方案。
                </p>
                <div class="footer-social">
                  <div class="footer-social">
                    <span><a href="#"><i class="fa-brands fa-weixin"></i></a></span>
                    <span
                      ><a href="#"><i class="fa-brands fa-weibo"></i></a
                    ></span>
                  </div>
                </div>
              </div>
            </div>
            <!-- Singel Item -->
            <div class="col-lg-3 col-sm-6 col-6 mb-30">
              <div class="footer-widgets-item">
                <h2>快速导航</h2>
                <ul class="menu">
                  <li><a href="index.html">首页</a></li>
                  <li><a href="about.html">关于我们</a></li>
                  <li><a href="services.html">产品介绍</a></li>
                  <li><a href="team.html">团队介绍</a></li>
                  <li><a href="contact.html">联系我们</a></li>
                </ul>
              </div>
            </div>
            <!-- Singel Item -->
            <div class="col-lg-3 col-sm-6 mb-30">
              <div class="footer-widgets-item">
                <h2>联系方式</h2>
                <ul class="contact-info">
                  <li>
                    <div class="icon">
                      <i class="fa-sharp fa-regular fa-house"></i>
                    </div>
                    <div class="content">
                      <h4>地址:</h4>
                      <p>上海市浦东新区天安金融大厦9楼</p>
                    </div>
                  </li>
                  <li>
                    <div class="icon">
                      <i class="fa-sharp fa-regular fa-envelope"></i>
                    </div>
                    <div class="content">
                      <h4>Email:</h4>
                      <p>support@aijianhongkang.com</p>
                    </div>
                  </li>
                  <li>
                    <div class="icon">
                      <i class="fa-regular fa-phone-flip"></i>
                    </div>
                    <div class="content">
                      <h4>热线:</h4>
                      <p>+456 123 4455</p>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Footer Bottom -->
      <div class="footer-bottom pt-30 pb-30">
        <div class="container">
          <div class="row">
            <div class="col-lg-12">
              <div class="copy-text">
                <p>
                 © 2025 上海爱健鸿康健康科技有限公司.
                </p>
              </div>
              <div class="col-lg-12">
              <div class="copy-text d-flex justify-content-center  align-items-center">
                <p class="">
                   <a href="https://beian.miit.gov.cn/" target="_blank">
                    <img src="../../static/image/icp-header.png"  >
                   沪ICP备2025111155号</a>
                </p>
              </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>
    `;
  }
}

customElements.define('footer-bar', FooterBar);